<template>
    <div class="connections">
        <div class="moduleHead">
            <router-link v-if="$store.state.user.userInfo.status.isGuest == 1" :to="{ name: 'upgrade' }">
                <span class="icon_gold"></span>
            </router-link>
            {{language.connections_title}}
        </div>
        <div class="menuArea">
            <div @click="swtichTab('visitors')" :class="tabClass('visitors','menu')">
                <p>
                    {{language.connections_visitors}}
                    <i v-if="stateNumsBefore.visitors" class="numTotal">{{stateNumsBefore.visitors}}</i>
                </p>
            </div>
            <div @click="swtichTab('winked')" :class="tabClass('winked','menu')">
                <p>
                    {{language.connections_winked}}
                    <i v-if="stateNumsBefore.winked" class="numTotal">{{stateNumsBefore.winked}}</i>
                </p>
            </div>
            <div @click="swtichTab('favedMe')" :class="tabClass('favedMe','menu')">
                <p>
                    {{language.connections_fave}}
                    <i v-if="stateNumsBefore.favedMe" class="numTotal">{{stateNumsBefore.favedMe}}</i>
                </p>
            </div>
            <div @click="swtichTab('myFaves')" :class="tabClass('myFaves','menu')">
                <span class="my"></span>
                <p>{{language.connections_myFaves}}</p>
            </div>
        </div>
        <div class="body" ref='divScrollListen'>
            <div class="tabArea" ref="divDropListen">
                <loading :props="dropData"></loading>
                <div :class="tabClass('visitors')">
                    <promptTip :props="condition.visitors.prompt"></promptTip>
                    <userList :userData="visitorsItems" :ajaxBool="condition.visitors.ajaxBool"></userList>
                </div>
                <div :class="tabClass('winked')">
                    <promptTip :props="condition.winked.prompt"></promptTip>
                    <userList :userData="winkedItems" :ajaxBool="condition.winked.ajaxBool"></userList>
                </div>
                <div :class="tabClass('favedMe')">
                    <promptTip :props="condition.favedMe.prompt"></promptTip>
                    <userList :userData="favedMeItems" :ajaxBool="condition.favedMe.ajaxBool"></userList>
                </div>
                <div :class="tabClass('myFaves')">
                    <promptTip :props="condition.myFaves.prompt"></promptTip>
                    <userList :userData="myFavesItems" :ajaxBool="condition.myFaves.ajaxBool"></userList>
                </div>
            </div>
        </div>
        <navBottom></navBottom>
    </div>
</template>
<script>
import * as API from '../api'
import globalMixin from '../common/globalMixin'
import navBottom from './NavBottom'
import userList from './UserList'
import promptTip from './PromptTip'
import loading from './Loading'
let scrollFunc,
    scrollTop = 0,
    connections = {
        visitors: [],
        winked: [],
        favedMe: [],
        myFaves: []
    };
export default {

    name: 'connections',

    components: {
        navBottom,
        userList,
        promptTip,
        loading
    },

    mixins: [globalMixin],

    data: function() {
        return {
            dropData: {
                type: 'dropDown',
                show: true,
                offset: 0,
                loading: false,
            },
            tab: 'visitors',
            stateNumsBefore: {
                visitors: 0,
                winked: 0,
                favedMe: 0,
            },
            stateNumsAfter: {
                visitors: 0,
                winked: 0,
                favedMe: 0,
            },
            condition: {
                visitors: {
                    from: 0,
                    offset: 20,
                    scrollTop: 0,
                    dataIndex: 0,
                    getData: true,
                    ajaxBool: false,
                    prompt: {},
                },
                winked: {
                    from: 0,
                    offset: 20,
                    scrollTop: 0,
                    dataIndex: 0,
                    getData: true,
                    ajaxBool: false,
                    prompt: {},
                },
                favedMe: {
                    from: 0,
                    offset: 20,
                    scrollTop: 0,
                    dataIndex: 0,
                    getData: true,
                    ajaxBool: false,
                    prompt: {},
                },
                myFaves: {
                    from: 0,
                    offset: 20,
                    scrollTop: 0,
                    dataIndex: 0,
                    getData: true,
                    ajaxBool: false,
                    prompt: {},
                },
            }
        }
    },

    activated: function() {
        this.dropData = {
            type: 'dropDown',
            show: true,
            offset: 0,
            loading: false,
        };
        this.stateNumsBefore = this.getNums();
        this.stateNumsAfter = this.getNums();
        if (this.tab == 'myFaves' || connections[this.tab].length == 0 || this.stateNumsBefore[this.tab] > 0) {
            this.clearData(this.tab);
            this.ajaxList(this.tab);
        }
    },

    deactivated: function() {
        this.setNums();
    },

    computed: {
        visitorsItems: function() {
            let data = [];
            for (let i = 0; i < this.condition.visitors.dataIndex; i++) {
                data.push(this.formatUserInfo(connections.visitors[i], this.stateNumsBefore.visitors));
            }
            return data;
        },
        winkedItems: function() {
            let data = [];
            for (let i = 0; i < this.condition.winked.dataIndex; i++) {
                data.push(this.formatUserInfo(connections.winked[i], this.stateNumsBefore.winked));
            }
            return data;
        },
        favedMeItems: function() {
            let data = [];
            for (let i = 0; i < this.condition.favedMe.dataIndex; i++) {
                data.push(this.formatUserInfo(connections.favedMe[i], this.stateNumsBefore.favedMe));
            }
            return data;
        },
        myFavesItems: function() {
            let data = [];
            for (let i = 0; i < this.condition.myFaves.dataIndex; i++) {
                data.push(this.formatUserInfo(connections.myFaves[i]));
            }
            return data;
        },
        userInfo: function() {
            return this.$store.state.user.userInfo;
        },

    },

    methods: {
        getNums: function() {
            let stateObj = this.$store.state.base.siteNumState,
                obj = {
                    'visitors': (typeof(stateObj) != 'undefined' && typeof(stateObj.viewed_count) != 'undefined') ? this.judgeNum(stateObj.viewed_count.new_count || 0) : 0,
                    'winked': (typeof(stateObj) != 'undefined' && typeof(stateObj.winked_me_count) != 'undefined') ? this.judgeNum(stateObj.winked_me_count.new_count || 0) : 0,
                    'favedMe': (typeof(stateObj) != 'undefined' && typeof(stateObj.interested_count) != 'undefined') ? this.judgeNum(stateObj.interested_count.new_count || 0) : 0,
                };
            // obj.visitors = obj.winked = obj.favedMe = 10;
            return obj;
        },

        setNums: function() {
            let stateObj = {};
            Object.assign(stateObj, this.$store.state.base.siteNumState);
            if (typeof(stateObj.viewed_count) != 'undefined') {
                stateObj.viewed_count.new_count = this.stateNumsAfter.visitors;
            }
            if (typeof(stateObj.winked_me_count) != 'undefined') {
                stateObj.winked_me_count.new_count = this.stateNumsAfter.winked;
            }
            if (typeof(stateObj.interested_count) != 'undefined') {
                stateObj.interested_count.new_count = this.stateNumsAfter.favedMe;
            }
            this.$store.dispatch('updateSiteNumStateData', stateObj);
        },

        moveUnSee: function(usrId) {
            for (let i in connections[this.tab]) {
                if (usrId == connections[this.tab][i].usr_id) {
                    connections[this.tab][i].is_un_see = 0;
                    console.log(usrId, connections[this.tab][i].usr_id, connections[this.tab][i].is_un_see);
                    break;
                }
            }
            this.condition[this.tab].dataIndex = connections[this.tab].length;

        },

        clearData: function(type) {
            if (typeof(type) != 'undefined') {
                this.condition[type].dataIndex = 0;
                this.condition[type].from = 0;
                this.condition[type].prompt = {};
                connections[type] = [];
                this.condition[type].getData = true;
            } else {
                for (let i in this.condition) {
                    this.condition[i].dataIndex = 0;
                    this.condition[i].from = 0;
                    this.condition[i].prompt = {};
                    connections[i] = [];
                    this.condition[i].getData = true;
                }
            }
        },

        tabClass: function(tabValue, type) {
            if (type == 'menu') {
                return tabValue == this.tab ? 'active main_color' : '';
            } else {
                return tabValue == this.tab ? 'tabBox active' : 'tabBox';
            };
        },

        swtichTab: function(val) {
            if (this.tab == val) {
                return;
            } else {
                this.tab = val;
                if (val == 'myFaves') {
                    this.clearData(val);
                    if (!this.condition[this.tab].ajaxBool) {
                        this.ajaxList(this.tab);
                    }
                } else {
                    if (!this.condition[this.tab].ajaxBool && (this.condition[this.tab].dataIndex == 0 || this.stateNumsAfter[this.tab] > 0)) {
                        if (this.stateNumsAfter[this.tab] > 0) {
                            this.clearData(this.tab);
                        }
                        this.ajaxList(this.tab);
                    }
                }
            }
        },

        onDivBottomScroll(e) {
            let tthis = this;
            if (this.$route.name == 'connections' && this.condition[tthis.tab].getData && !this.condition[tthis.tab].ajaxBool) {
                this.ajaxList(this.tab);
            }
        },

        onDivDropDown(type, offset) {
            let tthis = this;
            if (type == 'move' && tthis.tab != 'myFaves') {
                tthis.dropData.offset = offset;
            } else if (type == 'end' && tthis.tab != 'myFaves') {
                if (offset > 49 && !tthis.condition[tthis.tab].ajaxBool) {
                    tthis.dropData.loading = true;
                    tthis.dropData.offset = 0;
                    let callback = function() {
                        tthis.dropData.loading = false;
                        tthis.clearDivTouchData();
                    };
                    tthis.dropDownAjaxList(callback, tthis.tab);
                }
            } else {
                tthis.clearDivTouchData();
            }
        },

        showPrompt(response, tab) {
            let tthis = this,
                dataLength = tab == 'myFaves' ? response.res.length : response.un_see.concat(response.had_see).length,
                count = 0,
                iconClass='';
            if (typeof(response.count) != 'undefined') {
                count = response.count;
            } else {
                count = dataLength + tthis[tab + 'Items'].length;
            };
            if (count == 0) {
                if(tab != 'visitors'){
                    iconClass = 'icon_prompt_' + tab;
                }
                tthis.condition[tab].prompt = {
                    type: 'default',
                    icon: iconClass,
                    title: tthis.language['connections_' + tab + 'NodataTitle'],
                    btn: {
                        label: tthis.language.connections_promptBtnSearch,
                        callback: function() {
                            tthis.$router.push('/browse');
                        }
                    }
                }
                return true;
            };
            if (parseInt(tthis.userInfo.status.isGuest) == 1 && (tthis.tab == 'visitors' || tthis.tab == 'favedMe')) {
                tthis.condition[tab].prompt = {
                    type: 'upgrade',
                    title: count + tthis.language['connections_' + tab + 'GuestTitle'],
                    content: tthis.language['connections_' + tab + 'GuestMsg'],
                }
                return true;
            }
            return false;

        },

        ajaxList: function(tab) {
            var tthis = this;
            if (tthis.condition[tab].ajaxBool || !tthis.condition[tab].getData) {
                return;
            }
            tthis.condition[tab].ajaxBool = true;
            tthis.condition[tab].prompt = {};
            //
            tthis.divDataLoading = true;
            //
            var callback = function(response) {
                //
                tthis.divDataLoading = false;
                //
                tthis.condition[tab].ajaxBool = false;
                if (tthis.showPrompt(response, tab)) {
                    return false;
                };

                tthis.condition[tab].from += tthis.condition[tab].offset;
                let dataLength = 0;
                if (tab == 'myFaves') {
                    connections[tab] = connections[tab].concat(response.res);
                    dataLength = response.res.length;
                } else {
                    let unSee = response.un_see;
                    if (unSee.length > 0) {
                        for (let i in unSee) {
                            unSee[i].is_un_see = 1;
                        }
                        tthis.stateNumsBefore[tab] = unSee.length;
                    }

                    connections[tab] = unSee.concat(connections[tab].concat(response.had_see));
                    dataLength = response.un_see.concat(response.had_see).length;
                    tthis.stateNumsAfter[tab] = 0;
                }

                if (dataLength < tthis.condition[tab].offset) {
                    tthis.condition[tab].getData = false;
                }

                tthis.condition[tab].dataIndex = connections[tab].length;

            };
            var obj = {
                data: {
                    from: tthis.condition[tthis.tab].from,
                    offset: tthis.condition[tthis.tab].offset,
                },
                success: callback
            }
            API[tab + '_list'](obj);
        },

        dropDownAjaxList: function(dropDownCallback, tab) {
            var tthis = this;
            tthis.condition[tab].prompt = {};
            //
            tthis.divDataLoading = true;
            //
            var callback = function(response) {
                //
                tthis.divDataLoading = false;
                //
                if (dropDownCallback) {
                    dropDownCallback();
                }
                if (tthis.showPrompt(response, tab)) {
                    return false;
                };
                let unSee = response.un_see;
                if (unSee.length > 0) {
                    for (let i in unSee) {
                        unSee[i].is_un_see = 1;
                    }
                    tthis.stateNumsBefore[tab] = unSee.length;
                }
                connections[tab] = unSee.concat(connections[tab]);
                tthis.condition[tab].dataIndex = connections[tab].length;
                tthis.stateNumsAfter[tab] = 0;
            };
            var obj = {
                data: {
                    from: 0,
                    offset: 20,
                },
                success: callback
            }
            API[tab + '_list'](obj);
        },


        formatUserInfo(userInfo, stateNums) {
            let data = {};
            data.username = userInfo.username;
            data.usr_id = userInfo.usr_id;
            data.hide_profile = parseInt(userInfo.hide_profile) == 1 ? true : false;
            data.icon = this.getAvatar(userInfo.gender, userInfo.picture.icon);
            data.numberofpictures = userInfo.numberofpictures;
            data.baseInfo = this.formatUserLocation({
                age: userInfo.age,
                city: userInfo.city,
                state: userInfo.state,
                country: userInfo.country,
            });
            data.gender = userInfo.gender;
            data.headline = userInfo.headline || '';
            data.isGuest = userInfo.isGuest;
            data.event_date = userInfo.event_date;
            data.is_un_see = typeof(userInfo.is_un_see) != 'undefined' ? userInfo.is_un_see : 0;
            if (typeof(stateNums) != 'undefined' && parseInt(stateNums) == 0) {
                data.is_un_see = 0;
            }
            return data;
        },
    }
}

</script>
<style scoped>
.connections {
    width: 100%;
    padding: 93px 0 51px 0;
    background-color: #f5f7f8;
}

.connections .moduleHead {
    border-bottom: 0;
}

.connections .menuArea {
    width: 100%;
    height: 42px;
    background: #fff;
    text-align: center;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 44px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-shadow: 0px 3px 6px #eff1f2;
}

.connections .menuArea div {
    float: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #b5b5b5;
}

.connections .menuArea .num {
    position: absolute;
    left: 18px;
    top: -5px;
    min-width: 10px;
    border-radius: 7px;
    background: #DF4141;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
}

.connections .menuArea div p {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 42px;
    height: 42px;
}
.connections .menuArea div.active p {
    border-bottom: 2px solid #ccc;
    border-color: inherit;
    box-sizing: border-box;
}

.connections .menuArea div .numTotal {
    position: absolute;
    right: -12px;
    top: 1px;
    min-width: 10px;
    border-radius: 7px;
    background: #f64747;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
}

.connections .tabBox {
    display: none;
}

.connections .tabBox.active {
    display: block;
}

</style>
